<template>
  <div class="layout">
    <div class="layout-content">
      <header-box></header-box>
      <div class="width-percent-100 content-box ">
        <div class="banner-box">
          <img class="banner-bk" src="../assets/image/icon11.png" alt="">
          <div class="banner-info-box">
            <div class="banner-info">
              <div class="banner-title">
                <div class="orange-color">{{ itemInfo.rpaRobotName }}</div>
                <div>{{ itemInfo.content }}</div>
              </div>
              <div>
                <div class="type-item">{{ itemInfo.developerName }}</div>
                <div class="type-item" v-if="itemInfo.businessTypeName">{{ itemInfo.businessTypeName }}</div>
              </div>
              <div>
                <div class="detail-item">
                  <img class="detail-icon" src="../assets/image/icon12.png" alt="">
                  {{ itemInfo.developerName }}
                </div>
                <div class="detail-item">
                  <img class="detail-icon" src="../assets/image/icon15.png" alt="">
                  {{ itemInfo.uploadDate }}
                </div>
                <div class="detail-item">
                  <img class="detail-icon" src="../assets/image/icon17.png" alt="">
                  {{ itemInfo.heat }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="info-width flex-par">
          <div class="info-left">
            <div class="info-header">rpa附件下载</div>
            <div class="info-download">
              <button class="download-btn" @click="downloadFile" :disabled="!itemInfo.rpaFileAddress">
                <i class="download-icon">📥</i>
                <span>下载RPA文件</span>
              </button>
              <div v-if="itemInfo.rpaFileAddress" class="file-info">
                <small>文件路径: {{ serverUrl + itemInfo.rpaFileAddress }}</small>
              </div>
            </div>
            <div class="info-header">视频介绍(使用方法)</div>
            <div class="info-video-box">
              <video v-if="itemInfo.videoAddress" :key="itemInfo.videoAddress" class="info-video" controls preload="metadata">
                <!-- 添加视频源 -->
                <source :src="serverUrl + itemInfo.videoAddress" type="video/mp4">
                <source :src="serverUrl + itemInfo.videoAddress" type="video/webm">

                <!-- 如果浏览器不支持 video 标签则显示的文字 -->
                <p>抱歉，您的浏览器不支持 HTML5 视频播放。</p>
              </video>
              <div v-else class="video-loading">
                <p>视频加载中...</p>
              </div>
            </div>

            <div class="info-header">内容介绍</div>
            <div class="rich-content" v-html="itemInfo.richContent"></div>
          </div>
          <div class="info-right">
            <div class="right-list-box">
              <div class="right-list-title flex-par">
                <img src="../assets/image/icon19.png" class="r-list-icon" alt="">
                <div class="r-list-title">文章目录</div>
              </div>
              <div class="nav-list">
                <div class="nav-item active-style active">● rpa附件下载</div>
                <div class="nav-item active-style">● 视频介绍(使用方法)</div>
                <div class="nav-item active-style">● 内容介绍</div>
              </div>
            </div>
            <div class="right-list-box">
              <div class="right-list-title flex-par">
                <img src="../assets/image/icon1.png" class="r-list-icon" alt="">
                <div class="r-list-title">最新发布</div>
              </div>
              <div class="r-list">
                <div class="r-list-item flex-par active-style" v-for="item in tableData2" @click="toDetail(item.id)"
                  :key="item">
                  <!-- 左上角小logo -->
                  <div class="r-app-mini-logo">
                    <div class="r-mini-logo-icon">{{ getAppIcon(item.rpaRobotName) }}</div>
                  </div>
                  <div class="r-list-txt">
                    <div class="r-list-info1 slh">{{ item.rpaRobotName }}</div>
                    <div class="r-list-info2 slh">{{ item.content }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="footer">
          Copyright © 2025 鄂尔多斯有限公司 All Rights Reserved.鄂ICP备19047732号-5 |
          <span class="active-style">投诉</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import headerBox from '@/components/headerBox';


import { getSelectByType, getRpaInfo, serverUrl } from '@/assets/api/api.js';
export default {
  data: function () {
    return {
      id: '',
      serverUrl,
      tableData2: [],
      itemInfo: {}
    };
  },
  components: {
    headerBox,
  },
  mounted() {
    this.id = this.$route.params.id
    this.getPageList2()
    this.getRpaInfoF()
  },
  methods: {
    toDetail(id) {
      this.$router.replace({
        path: '/yingyongDetail/' + id
      })
      setTimeout(() => {
        window.location.reload()
      }, 300);


    },
    //   -列表
    getPageList2() {
      getSelectByType({
        type: '',
        pageNum: 1,
        pageSize: 10,
        sortBy: 'time',//‘’，id||time||dowmload
      })
        .then((res) => {
          console.log(res)
          if (res.code == 0) {
            //console.log(res.data)
            this.tableData2 = res.data
          }
        })
        .catch((err) => { });
    },
    getRpaInfoF() {
      getRpaInfo({ id: this.id })
        .then((res) => {
          console.log(res)
          if (res.code == 0) {
            this.itemInfo = res.data
          }
        })
        .catch((err) => { });
    },
    downloadFile() {
      if (this.itemInfo.rpaFileAddress) {
        const downloadUrl = this.serverUrl + this.itemInfo.rpaFileAddress;
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.download = this.itemInfo.rpaRobotName + '.ibt';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    },
    // 根据应用名称获取对应的图标
    getAppIcon(appName) {
      const iconMap = {
        '监察': '🔍',
        '监控': '📊',
        '日报': '📋',
        '发票': '🧾',
        '配电': '⚡',
        '设备': '🔧',
        '数据': '📈',
        '财务': '💰',
        '人事': '👥',
        '客服': '🎧',
        '销售': '💼',
        '生产': '🏭',
        '质量': '✅',
        '安全': '🛡️',
        '物流': '🚚',
        '库存': '📦',
        '采购': '🛒',
        '合同': '📄',
        '审批': '✍️',
        '统计': '📊'
      };
      
      // 根据应用名称关键词匹配图标
      for (const [keyword, icon] of Object.entries(iconMap)) {
        if (appName.includes(keyword)) {
          return icon;
        }
      }
      
      // 默认图标
      return '🤖';
    },
  },
};
</script>
<style scoped>
.layout {
  height: 100%;
}

.layout-content {
  height: 100%;
  width: 100%;

  background: white;
  /* background-size: 100% 100%; */
}

.content-box {
  height: calc(100% - 70px);
  width: 100%;
  background-color: #E7F0F6;
  overflow: auto;
}

.banner-box {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.banner-bk {
  width: 100%;
  height: 660px;
  display: block;
}

.banner-info-box {
  position: absolute;
  width: 1400px;
  top: 0;
  bottom: 0;
  left: calc(50% - 700px);


  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 垂直居中 */
}

.banner-info {
  position: absolute;
  width: 1400px;
  height: 300px;
  text-align: center;
}

.banner-title {
  font-weight: 900;
  font-size: 60px;
  color: white;
}

.type-item {
  background-color: rgba(245, 154, 35, 1);
  font-size: 16px;
  color: #FFFFFF;
  display: inline-block;
  padding: 0 30px;
  border-radius: 41px;
  height: 40px;
  line-height: 40px;
  margin: 20px 10px;
}

.detail-item {
  font-size: 14px;
  color: #FFFFFF;
  display: inline-block;
  margin: 8px;
  height: 20px;
  line-height: 20px;
}

.detail-icon {
  width: 14px;
  height: 14px;
  position: relative;
  top: 2px;
}



.info-left {
  width: 980px;
  background: white;
  border-radius: 10px;
  margin: 20px 20px 20px 0;
  padding: 20px;
}

.info-header {
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-size: 22px;
  color: #000000;
  line-height: 30px;
  position: relative;
  padding: 16px;

}

.info-video-box {}

.info-video {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 600px;
}

.video-loading {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 8px;
  color: #666;
  font-size: 16px;
}

.rich-content {
  padding: 0 16px 16px 16px;
  font-size: 16px;
  line-height: 1.75;
  color: #333;
}
.rich-content img,
.rich-content video,
.rich-content iframe {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 12px auto;
  border-radius: 6px;
}
.rich-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}
.rich-content pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background: #f7f8fa;
  border-radius: 6px;
  padding: 12px;
  overflow: auto;
}
.rich-content p { margin: 10px 0; }
.rich-content h1 { font-size: 28px; margin: 20px 0 10px; font-weight: 700; }
.rich-content h2 { font-size: 24px; margin: 18px 0 10px; font-weight: 700; }
.rich-content h3 { font-size: 20px; margin: 16px 0 8px; font-weight: 700; }
.rich-content a { color: #0d66ff; text-decoration: none; }
.rich-content a:hover { text-decoration: underline; }
.rich-content ul, .rich-content ol { padding-left: 24px; margin: 10px 0; }
.rich-content blockquote {
  margin: 14px 0;
  padding: 10px 12px;
  background: #f7fbff;
  border-left: 4px solid #2b77ff33;
  color: #555;
}
.rich-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #f7f8fa;
  border-radius: 6px;
  padding: 2px 6px;
}
.rich-content th, .rich-content td { padding: 12px; border-bottom: 1px solid #eee; text-align: left; }

.info-header:after {
  content: "";
  position: absolute;
  left: 0px;
  top: 18px;
  width: 6px;
  height: 26px;
  background-color: rgba(0, 72, 143, 1);
  border-radius: 5px;
}

.info-download {
  padding: 0 18px;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.download-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.download-btn:active:not(:disabled) {
  transform: translateY(0);
}

.download-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  box-shadow: none;
}

.download-icon {
  font-size: 18px;
}

.file-info {
  margin-top: 12px;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #667eea;
}

.file-info small {
  color: #666;
  font-size: 12px;
  word-break: break-all;
}

.footer {
  background: linear-gradient(180deg, rgba(22, 22, 24, 1) 0%, rgba(0, 0, 0, 1) 100%);
  height: 70px;
  line-height: 70px;
  text-align: center;
  color: white;
  font-size: 14px;
}

.info-right {}

.right-list-box {
  background: white;
  border-radius: 10px;
  width: 400px;
  padding: 20px;
  margin-top: 20px;
}

.right-list-box:last-child {
  margin-bottom: 20px;
}

.right-list-title {}

.r-list-icon {
  width: 22px;
  height: 22px;
}

.r-list-title {
  flex: 1;
  margin-left: 6px;
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.nav-list {}

.nav-item {
  font-size: 14px;
  color: #333;
  margin-top: 15px;
  padding-left: 6px;
}

.nav-item.active {
  font-weight: 700;
  text-decoration: none;
  color: #00488F;
  font-size: 18px;
}

.nav-item:after {
  content: "";
  position: absolute;
}

.r-list {}

.r-list-btn {}

.r-list-item {
  margin-top: 16px;
}

/* 推荐列表左上角小logo样式 */
.r-app-mini-logo {
  position: relative;
  margin-right: 10px;
}

.r-mini-logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(53, 107, 226, 0.9), rgba(0, 242, 241, 0.9));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: white;
  box-shadow: 0 3px 8px rgba(53, 107, 226, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.r-list-item:hover .r-mini-logo-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 4px 12px rgba(53, 107, 226, 0.4);
}

.r-list-txt {
  width: 300px;
}

.r-list-info1 {
  font-size: 16px;
  color: #333;
}

.r-list-info2 {
  font-size: 14px;
  color: #7F7F7F;
  margin-top: 5px;
}
</style>